<template>
  <ComponentContainerProperty v-model="formData.style">
    <!-- 表单 -->
    <el-form label-width="80px" :model="formData" class="m-t-8px">
      <el-card header="搜索热词" class="property-group" shadow="never">
        <Draggable v-model="formData.hotKeywords" :empty-item="''">
          <template #default="{ index }">
            <el-input v-model="formData.hotKeywords[index]" placeholder="请输入热词" />
          </template>
        </Draggable>
      </el-card>
      <el-card header="搜索样式" class="property-group" shadow="never">
        <el-form-item label="框体样式">
          <el-radio-group v-model="formData!.borderRadius">
            <el-tooltip content="方形" placement="top">
              <el-radio-button :value="0">
                <Icon icon="tabler:input-search" />
              </el-radio-button>
            </el-tooltip>
            <el-tooltip content="圆形" placement="top">
              <el-radio-button :value="10">
                <Icon icon="iconoir:input-search" />
              </el-radio-button>
            </el-tooltip>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="提示文字" prop="placeholder">
          <el-input v-model="formData.placeholder" />
        </el-form-item>
        <el-form-item label="文本位置" prop="placeholderPosition">
          <el-radio-group v-model="formData!.placeholderPosition">
            <el-tooltip content="居左" placement="top">
              <el-radio-button value="left">
                <Icon icon="ant-design:align-left-outlined" />
              </el-radio-button>
            </el-tooltip>
            <el-tooltip content="居中" placement="top">
              <el-radio-button value="center">
                <Icon icon="ant-design:align-center-outlined" />
              </el-radio-button>
            </el-tooltip>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="悬浮" prop="fixedStatus">
          <el-switch v-model="formData!.fixedStatus" />
        </el-form-item>
        <el-form-item label="扫一扫" prop="showScan">
          <el-switch v-model="formData!.showScan" />
        </el-form-item>
        <el-form-item label="搜索" prop="showBtn">
          <el-switch v-model="formData!.showBtn" />
        </el-form-item>
        <el-form-item label="按钮高度" prop="btnHeight">
          <el-slider v-model="formData!.btnHeight" :max="100" :min="18" show-input input-size="small" />
        </el-form-item>
        <el-form-item label="按钮宽度" prop="btnWidth">
          <el-slider v-model="formData!.btnWidth" :max="200" :min="18" show-input input-size="small" />
        </el-form-item>
        <el-form-item label="按钮圆角" prop="btnRadius">
          <el-slider v-model="formData!.btnRadius" :max="100" :min="0" show-input input-size="small" />
        </el-form-item>
        <el-form-item label="按钮背景颜色" prop="BtnBgColor">
          <ColorInput v-model="formData.BtnBgColor" />
        </el-form-item>
        <el-form-item label="按钮文字颜色" prop="btnTxtColor">
          <ColorInput v-model="formData.btnTxtColor" />
        </el-form-item>
        <el-form-item label="按钮文字大小" prop="btnTxtSize">
          <el-slider v-model="formData!.btnTxtSize" :max="30" :min="8" show-input input-size="small" />
        </el-form-item>
        <el-form-item label="购物车" prop="cartBtn.show">
          <el-switch v-model="formData!.cartBtn.show" />
        </el-form-item>
        <el-form-item label="购物车图标" prop="cartBtn.iconUrl" v-if="formData!.cartBtn.show">
          <UploadImg v-model="formData!.cartBtn.iconUrl" height="100px" width="100px">
            <template #tip>建议尺寸：24 * 24</template>
          </UploadImg>
        </el-form-item>
        <el-form-item label="框体高度" prop="height">
          <el-slider v-model="formData!.height" :max="50" :min="28" show-input input-size="small" />
        </el-form-item>
        <el-form-item label="框体颜色" prop="backgroundColor">
          <ColorInput v-model="formData.backgroundColor" />
        </el-form-item>
        <el-form-item class="lef" label="文本颜色" prop="textColor">
          <ColorInput v-model="formData.textColor" />
        </el-form-item>
      </el-card>
    </el-form>
  </ComponentContainerProperty>
</template>

<script setup lang="ts">
import { usePropertyForm } from '@/components/DiyEditor/util'
import { SearchProperty } from '@/components/DiyEditor/components/mobile/SearchBar/config'

/** 搜索框属性面板 */
defineOptions({ name: 'SearchProperty' })

const props = defineProps<{ modelValue: SearchProperty }>()
const emit = defineEmits(['update:modelValue'])
const { formData } = usePropertyForm(props.modelValue, emit)

// 确保 cartBtn 有默认值
if (!formData.value.cartBtn) {
  formData.value.cartBtn = {
    show: false,
    iconUrl: ''
  }
}
</script>

<style scoped lang="scss"></style>
